<template>
  <div class="result">
    <header class="header">
      <img src="../assets/images/logo.png" />
      <h1>节能产品认证信息查询平台</h1>
      <label @click="$router.back()"><i class="iconfont icon-search"></i></label>
    </header>
    <div class="result-header" v-if="dataTotal > 0">查询到 <i v-text="dataTotal"></i> 条搜索结果</div>
    <div class="result-body" v-if="loaded && dataTotal > 0">
      <van-list v-model="loading" :finished="finished" :finished-text="currentPage >= Math.ceil(dataTotal / 150) ? '没有数据了' : '当前页没有数据了'" @load="loadResultList">
        <dl v-for="(e, i) in resultList" :key="i">
          <dt>
            <h4><span>规格型号</span><label v-text="e.model"></label></h4>
            <van-button plain color="#1f53b1" type="info" @click="getContacts(e)" size="mini" round>查看联系人</van-button>
          </dt>
          <dd :class="{expaned: typeof e.expaned === 'boolean'}">
            <ul class="attr-list">
              <li v-for="(f, j) in e.fields" :class="{basic: j < 5}">
                <label v-text="f.title"></label>
                <p>
                  <em v-if="(typeof f.value === 'number' && (''+f.value).length === 13) && f.value > new Date().getTime()">有效</em>
                  <span v-text="(typeof f.value === 'number' && (''+f.value).length === 13) ? $options.filters.dateFormat(new Date(f.value)) : f.value"></span>
                </p>
              </li>
            </ul>
            <h5 @click="doExpandAll(e)"><span>展开所有信息</span><i class="iconfont icon-more"></i></h5>
          </dd>
        </dl>
      </van-list>
    </div>
    <div class="result-body" v-if="loaded && dataTotal < 1">
      <div class="nodata">
        <img src="static/images/nodata.png" />
        没有查询到符合条件的搜索结果
      </div>
    </div>
    <div class="result-footer" v-if="dataTotal > 150">
      <van-pagination v-model="currentPage" force-ellipses :total-items="dataTotal" :items-per-page="150"  :show-page-size="7" @change="changePage">
        <template #prev-text>
          <van-icon name="arrow-left"/>
        </template>
        <template #next-text>
          <van-icon name="arrow"/>
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>
    <van-popup v-model="showContacts" @open="openPopup" position="right" :style="{height: '100%', width: '100%'}">
      <div class="contacts-layer">
        <dl>
          <dt>
            <label @click="showContacts = false"><i class="iconfont icon-back"></i></label>
            <ul>
              <li :class="{current: tab === 1}"><a href="javascript:;" @click="changeTab(1)">生产者/制造商</a></li>
              <li :class="{current: tab === 2}"><a href="javascript:;" @click="changeTab(2)">认证机构信息</a></li>
            </ul>
          </dt>
          <dd :class="{active: tab === 1}">
            <ul>
              <li v-if="!!currentContacts.contacts" v-for="(e, i) in currentContacts.contacts" :key="i">
                <label v-text="e.title"></label>
                <span v-text="e.value"></span>
              </li>
            </ul>
          </dd>
          <dd :class="{active: tab === 2}">
            <ul v-if="!!currentContacts.orgs" v-for="(e, i) in currentContacts.orgs" :key="i">
              <li v-for="(f, j) in e.fields">
                <label v-text="f.title"></label>
                <span v-text="f.value"></span>
              </li>
            </ul>
          </dd>
        </dl>
      </div>
    </van-popup>
  </div>
</template>
<script>
  import { Toast } from 'vant'
  import _ORGS_ from '../assets/js/orgs'
  export default {
    name: "result",
    data () {
      return {
        tab: 1,
        currentPage: 1,
        dataTotal: 0,
        resultList: [],
        dataCache: {},
        seatched: false,
        loaded: true,
        loading: false,
        finished: false,
        showContacts: false,
        currentContacts: {},
        searchParams: window.$searchParams
      }
    },
    methods: {
      changeTab (tab) {
        this.tab = tab;
      },
      openPopup () {

      },
      getContacts (target) {
        let self = this;
        if (typeof target.contacts !== 'object') {
          let certNo = target.fields.filter(f => {
            return f.title === '证书编号';
          });
          if (!!certNo && certNo.length === 1) {
            self.$ajax.post('/dir_local/dist/queryQdData!queryLink.action', {
              certNo: certNo[0].value,
              buttonName: 'queryLinkMOBILE'
            }).then(res => {
              if (res.code === 0) {
                res = res.data;
                self.$set(target, 'contacts', {
                  contacts: res['fields'],
                  orgs: _ORGS_
                });
                self.currentContacts = target.contacts;
                self.showContacts = true;
              } else {
                Toast({
                  message: '获取联系人信息错误，请重试',
                  position: 'bottom',
                });
              }
            });
          } else {
            Toast({
              message: '未获取到到证书标号',
              position: 'bottom',
            });
          }
        } else {
          self.currentContacts = target.contacts;
          self.showContacts = true;
        }
      },
      loadResultList: function () {
        let self = this;
        let pageData = self.dataCache['page-' + self.currentPage];
        if (typeof pageData === 'object' && pageData.length) {
          let tlist = pageData.slice(self.resultList.length, self.resultList.length + 20);
          self.resultList = self.resultList.concat(tlist);
          self.loading = false;
          if (pageData.length === self.resultList.length) {
            self.finished = true;
          }
        }
      },
      backTop () {
        window.scrollTo(0,0);
      },
      changePage () {
        let self = this;
        window.$searchParams.startIndex = self.currentPage * 150 - 149;
        window.$searchParams.endIndex = self.currentPage * 150;
        window.$searchParams.buttonName = 'nextPageMOBILE';
        self.resultList = [];
        self.loading = false;
        self.finished = false;
        self.backTop();
        self.getDataList();
      },
      getDataList: function () {
        var self = this;
        if (!!self.loaded && typeof window.$searchParams === 'object') {
          if (typeof self.dataCache['page-' + self.currentPage] === 'object') {
            self.resultList = [];
            self.loadResultList();
            setTimeout(function () {
              self.backTop();
            }, 10);
          } else {
            self.loaded = false;
            self.$ajax.post('/dir_local/dist/queryQdData!queryQd.action', window.$searchParams).then(res => {
              if (res['code'] === 0) {
                self.dataCache['page-' + self.currentPage] = res['data'];
                self.loadResultList();
                self.dataTotal = res['size'];
                setTimeout(function () {
                  self.backTop();
                }, 10);
              }
              self.loaded = true;
            });
          }
        }
      },
      doExpandAll (target) {
        this.$set(target, 'expaned', true);
      }
    },
    created() {
      this.getDataList();
    },
    mounted() {
      this.backTop();
    }
  }
</script>
